<template>
  <div>
    <div>
      <header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <router-link to="/user">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span class="iconfont">&#xe609;</span>
              </div>
            </el-col>
          </router-link>
          <div style="margin-right: 40.3%;color: #fff; font-size: 20px;">我的资料</div>
        </el-row>
      </header>
      <div style="height: 40.8px"></div>
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="medium" :disabled="clicks">
      <el-form-item label="头像" prop="file">
            <el-upload
              action="a"
              ref="upload"
              :class="{ disabled: uploadDisabled }"
              list-type="picture-card"
              :limit="1"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :auto-upload="false"
              accept="image/*"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="ruleForm.nickName" class="input-box" placeholder="infochange.nickName"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
        <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
      </el-form-item>
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="ruleForm.userName" class="input-box" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="学号" prop="stuId">
        <el-input v-model="ruleForm.stuId" class="input-box" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="telNumber">
        <el-input v-model="ruleForm.telNumber" class="input-box" placeholder="请输入内容"></el-input>
      </el-form-item>
       <el-form-item label="邮箱" prop="userEmail">
        <el-input v-model="ruleForm.userEmail" class="input-box" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="个人简介" prop="userDesc">
        <el-input type="textarea" v-model="ruleForm.userDesc" class="input-box" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align: center;">
      <el-button type="primary" @click="submitForm('ruleForm','clicks')" :disabled="clicks">提交</el-button>
      <el-button @click="resetForm('clicks')">修改</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'Profiles',
    props: {
      userId: String
    },
    data() {
      var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
      }
      return {
        ruleForm: {},
        clicks: true,
        sex: '1',
        ruleForm: {
          userId: '',
          file: '',
          nickName: '',
          sex: '',
          userName: '',
          stuId: '',
          telNumber: '',
          userEmail: '',
          userDesc: ''
        },
        rules: {
           file: [
            { required: false, message: "请上传文件", trigger: "blur" }
          ],
          nickName: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
            { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur' }
          ],
          userName: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
          ],
          stuId: [
            { required: true, message: '请输入学号', trigger: 'blur' },
            { min: 8, max: 8, message: '长度为8个字符', trigger: 'blur' }
          ],
          telNumber: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' }
          ],
          userEmail: [
            { validator: checkEmail, trigger: 'blur' }
          ],
          desc: [
            { required: false, message: '请填写简介', trigger: 'blur' },
            { min: 0, max: 20, message: '最多填写20个字', trigger: 'blur' }
          ]
        },
        loading: false,
        uploadDisabled: false,
      };
    },
    methods: {
       handleChange(file, fileList) {
        if (file.size > 1280 * 720) {
          this.$refs.upload.clearFiles();
          this.uploadDisabled = false;
          this.$message({
            message: "上传图片过大!",
            type: "error"
          });
        } else {
          this.uploadDisabled = fileList.length >= 1;
          this.ruleForm.file = file.raw; //将上传文件给表单的字段 
        }
      },
      handleRemove(file, fileList) {
        console.log("handleRemove", file);
        this.uploadDisabled = fileList.length >= 1;
      },
      submitForm(formName,clicks) {
        let formData = new FormData();
        for(var key in this.ruleForm){
          formData.append(key,this.ruleForm[key]);
        }
          // file: '',
          // nickName: '',
          // sex: '',
          // userName: '',
          // stuId: '',
          // telNum: '',
          // userEmail: '',
          // userDesc: ''
        axios({
          method:"post",
          url:"a",
          headers: {
          "Content-Type": "multipart/form-data"
          },
          withCredentials:true,
          data:formData
      }).then((res)=>{
                console.log(res);
            });
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        //     alert('修改成功!');
        //     this.clicks = true
        //     return clicks
        //   } else {
        //     alert('修改失败!');
        //     return false;
        //   }
        // });
      },
      resetForm(clicks) {
        this.clicks=false;
        return clicks
      },
      getHomeInfo () {
          axios.get('/static/mock/infochange.json')
              .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc (res) {
          res = res.data
          if (res.ret && res.data) {
              const data = res.data
              this.ruleForm = data.user
          }else {
              alert('数据获取失败')
          }
          console.log(res)
      }
    },
    mounted () {
        this.getHomeInfo()
    }
}
</script>

<style>
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    line-height: 2.5rem;
    background: #67C23A;
    text-align: center;
    }
  .iconfont {
    font-size: 1.6rem;
    color: #fff;
    margin-left: .4rem;
    }
    .demo-ruleForm {
      margin-top: 15px;
    }
    .input-box {
      width: 200px;
    }
    .disabled .el-upload--picture-card {
    display: none;
  }
</style>